<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>算术运算 | Sass中文文档</title>
    <meta name="description" content="Sass是世界上最成熟、稳定、强大的专业级CSS扩展语言">
    <meta name="keywords" content="Sass,Sass教程,Sass中国,Sass中文,Sass文档,SCSS,SCSS教程,SCSS中国,SCSS中文,SCSS文档,CSS预处理">
  <link rel="icon" href="/sass-cn/images/favicon.ico" preload="true" as="image">
    
    <link rel="preload" href="/sass-cn/assets/css/0.styles.2d6686da.css" as="style"><link rel="preload" href="/sass-cn/assets/js/app.deb571aa.js" as="script"><link rel="preload" href="/sass-cn/assets/js/layout-layout.f021cffe.js" as="script"><link rel="preload" href="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" as="script"><link rel="preload" href="/sass-cn/assets/js/page-api-operators-numeric.99a7bdba.js" as="script"><link rel="preload" href="/sass-cn/assets/js/93.6bc9799b.js" as="script"><link rel="prefetch" href="/sass-cn/assets/js/86.f407d520.js"><link rel="prefetch" href="/sass-cn/assets/js/87.34d80629.js"><link rel="prefetch" href="/sass-cn/assets/js/88.7da6d807.js"><link rel="prefetch" href="/sass-cn/assets/js/89.c6220562.js"><link rel="prefetch" href="/sass-cn/assets/js/90.9b5a2114.js"><link rel="prefetch" href="/sass-cn/assets/js/91.bd6167c2.js"><link rel="prefetch" href="/sass-cn/assets/js/92.339ec357.js"><link rel="prefetch" href="/sass-cn/assets/js/94.322094fc.js"><link rel="prefetch" href="/sass-cn/assets/js/95.376dbcc7.js"><link rel="prefetch" href="/sass-cn/assets/js/96.ab69b324.js"><link rel="prefetch" href="/sass-cn/assets/js/layout-notfound.626e4f7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-atroot.32ef08ae.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-debug.06148e5a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-error.29586dbb.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-extend.cb5a5d75.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-each.4393ee83.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-for.cb8126b0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-ifandelse.bc133ead.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-readme.208a4bd0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-while.b671cb7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-formcss.6b9bf244.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-forward.84e92434.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-function.92dd9149.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-import.1caa72ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-mixinandinclude.317a55a5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-readme.488e2ba3.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-use.389e0385.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-warn.2f405d31.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-compoundselectors.a819b0fe.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-readme.bd231221.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-variablesyntax.5a5f2d19.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-dart.48bed8a2.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-readme.07ce98e9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-ruby.8eaf4b85.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-colors.0e3e5304.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-introspection.ada8df60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-lists.a4895d0e.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-maps.45a902b5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-numbers.c8f4b6cc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-plain.fef59f4c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-readme.541e96b9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-selectors.38c993bc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-strings.175e953b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-interpolation.c1b3ae69.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-jsapi.a56000a6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-color.8963ea84.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-list.10a115ab.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-map.e0491724.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-math.0fa1c600.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-meta.0db00faa.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-readme.725f2037.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-selector.277cf2d4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-string.f885bb86.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-boolean.8989e7df.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-equality.f9f7f23a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-readme.652142ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-relational.0d200de4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-string.856849c0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-readme.4d32e79b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-parentselector.ec3b0a60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-placeholderselectors.02d3d2d8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-propertydeclarations.c36f8cc8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-readme.0e7410e6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-comments.96ee19bd.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-functions.ea6a9af7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-parsing.b904a6f4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-readme.73283f3d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-structure.3ae5c00a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-booleans.fe9e9754.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-colors.e2ba3180.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-functions.3c5f60ca.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-lists.c9668494.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-maps.e77a0fb7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-null.93ac8da1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-numbers.3976f2f1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-readme.94af6f11.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-strings.2570f03f.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-variables.2b768950.js"><link rel="prefetch" href="/sass-cn/assets/js/page-code.04c89951.js"><link rel="prefetch" href="/sass-cn/assets/js/page-contact.31a84f81.js"><link rel="prefetch" href="/sass-cn/assets/js/page-install-readme.48b75800.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-extend.93e31b0d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-import.d9dfee8b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-mixins.bb4b5fc6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-nesting.1fcb2b18.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-operators.b089064a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-partials.516dba99.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-preprocessing.8a2f2124.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-readme.2a880d8a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-variables.cc64042a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-readme.6924f94e.js">
    <link rel="stylesheet" href="/sass-cn/assets/css/0.styles.2d6686da.css">
    <meta name="baidu-site-verification" content="HISWYjeJhP">
    <meta name="google-site-verification" content="o-XFzkWKa1fqZMPS6L8cuu7-UCoqTSWKhk-tZAdIW9E">
    <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0e27eeb01c53bbd49dcc535da62d57ac"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s) })();</script>
</head>

<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/sass-cn/" class="home-link router-link-active"><!----> <span class="site-name">Sass中文文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link router-link-active">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link router-link-active">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div style="padding:1rem 0;"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="1743359721" class="adsbygoogle" style="display:inline-block;width:260px;height:120px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <ul class="sidebar-links"><li><a href="/sass-cn/install/" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>学习指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/learn/" class="sidebar-link">基础知识</a></li><li><a href="/sass-cn/learn/Preprocessing.html" class="sidebar-link">预处理</a></li><li><a href="/sass-cn/learn/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/learn/Nesting.html" class="sidebar-link">嵌套规则</a></li><li><a href="/sass-cn/learn/Partials.html" class="sidebar-link">片段文件</a></li><li><a href="/sass-cn/learn/Import.html" class="sidebar-link">文件导入</a></li><li><a href="/sass-cn/learn/Mixins.html" class="sidebar-link">混合器</a></li><li><a href="/sass-cn/learn/Extend.html" class="sidebar-link">扩展与继承</a></li><li><a href="/sass-cn/learn/Operators.html" class="sidebar-link">操作符</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/" class="sidebar-link">综述</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>样式规则</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/api/Interpolation.html" class="sidebar-link">插值</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>@规则</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>值类型</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>操作符</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/Operators/" class="sidebar-link">概述</a></li><li><a href="/sass-cn/api/Operators/Equality.html" class="sidebar-link">等值运算</a></li><li><a href="/sass-cn/api/Operators/Relational.html" class="sidebar-link">关系运算</a></li><li><a href="/sass-cn/api/Operators/Numeric.html" class="active sidebar-link">算术运算</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/sass-cn/api/Operators/Numeric.html#一元操作符" class="sidebar-link">一元操作符</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/Operators/Numeric.html#除法运算" class="sidebar-link">除法运算</a></li><li class="sidebar-sub-header"><a href="/sass-cn/api/Operators/Numeric.html#单位" class="sidebar-link">单位</a></li></ul></li><li><a href="/sass-cn/api/Operators/String.html" class="sidebar-link">字符运算</a></li><li><a href="/sass-cn/api/Operators/Boolean.html" class="sidebar-link">布尔运算</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>内置模块</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>重大改变</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>命令行</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/JsApi.html" class="sidebar-link">JavaScript API</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="算术运算"><a href="#算术运算" aria-hidden="true" class="header-anchor">#</a> 算术运算</h1> <div><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="9720145993" class="adsbygoogle" style="display:inline-block;width:600px;height:90px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <p>Sass支持<a href="">数字</a>数学运算符的标准集。它们在兼容的单位之间自动转换。</p> <ul><li>加法，<code>&lt;expression&gt; + &lt;expression&gt;</code>。</li> <li>减法，<code>&lt;expression&gt; - &lt;expression&gt;</code>。</li> <li>乘法，<code>&lt;expression&gt; * &lt;expression&gt;</code>。</li> <li>除法，<code>&lt;expression&gt; / &lt;expression&gt;</code>。</li> <li><a href="https://zh.wikipedia.org/wiki/%E6%A8%A1%E9%99%A4" target="_blank" rel="noopener noreferrer">模除<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，<code>&lt;expression&gt; % &lt;expression&gt;</code>。</li></ul> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> 10s <span class="token operator">+</span> 15s<span class="token punctuation">;</span> <span class="token comment">// 25s</span>
<span class="token keyword">@debug</span> 1in <span class="token operator">-</span> 10px<span class="token punctuation">;</span> <span class="token comment">// 0.8958333333in</span>
<span class="token keyword">@debug</span> 5px <span class="token operator">*</span> 3px<span class="token punctuation">;</span> <span class="token comment">// 15px*px</span>
<span class="token keyword">@debug</span> <span class="token punctuation">(</span>12px/4px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token keyword">@debug</span> 1in <span class="token operator">%</span> 9px<span class="token punctuation">;</span> <span class="token comment">// 0.0625in</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> 10s <span class="token atrule">+</span> 15s  // 25s</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1in - 10px  // 0.8958333333in</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 5px * 3px  // 15px*px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> (12px/4px)  // 3</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1in % 9px  // 0.0625in</span>
</code></pre></div></div></div></div> <p>无单位数可以与任何单位的数一起使用。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> 100px <span class="token operator">+</span> 50<span class="token punctuation">;</span> <span class="token comment">// 150px</span>
<span class="token keyword">@debug</span> 4s <span class="token operator">*</span> 10<span class="token punctuation">;</span> <span class="token comment">// 40s</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> 100px <span class="token atrule">+</span> 50  // 150px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 4s * 10  // 40s</span>
</code></pre></div></div></div></div> <p>单位不相容的数不能与加法、减法或模除一起使用。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> 100px <span class="token operator">+</span> 10s<span class="token punctuation">;</span>
<span class="token comment">//     ^^^^^^^^^^^</span>
<span class="token comment">// Error: Incompatible units px and s.</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> 100px <span class="token atrule">+</span> 10s</span>
<span class="token comment">//     ^^^^^^^^^^^</span>
<span class="token comment">// Error: Incompatible units px and s.</span>
</code></pre></div></div></div></div> <h2 id="一元操作符"><a href="#一元操作符" aria-hidden="true" class="header-anchor">#</a> 一元操作符</h2> <p>您也可以把<code>+</code>和<code>-</code>当成一元运算符使用，它们只取一个值:</p> <ul><li><code>+&lt;expression&gt;</code>返回表达式的值而不改变它。</li> <li><code>-&lt;expression&gt;</code>返回表达式值的负值</li></ul> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> +<span class="token punctuation">(</span>5s <span class="token operator">+</span> 7s<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12s</span>
<span class="token keyword">@debug</span> <span class="token function">-</span><span class="token punctuation">(</span>50px <span class="token operator">+</span> 30px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -80px</span>
<span class="token keyword">@debug</span> <span class="token function">-</span><span class="token punctuation">(</span>10px <span class="token operator">-</span> 15px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5px</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> <span class="token atrule">+</span>(5s <span class="token atrule">+</span> 7s)  // 12s</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> -(50px <span class="token atrule">+</span> 30px)  // -80px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> -(10px - 15px)  // 5px</span>
</code></pre></div></div></div></div> <div class="warning custom-block"><p><code>-</code>既可以当做减法使用，也可以当做一元操作符使用，在空格分隔的列表中，可能会造成混淆。按照以下规则确保正确的使用：</p> <ul><li>在当减法使用时，在减号的两边都留空格。</li> <li>在负数或一元否定词之前写一个空格，而不是之后。</li> <li>如果在空格分隔的列表中，则将一元否定括在括号中。</li></ul> <p><code>-</code>在Sass的不同含义按以下顺序排列：</p> <ol><li><code>-</code>作为标识符的一部分。唯一的例外是单位；Sass通常允许将任何有效标识符用作标识符，但是单位中不能包含连字符和数字。</li> <li><code>-</code>在表达式和没有空格的字符数字之间，该数字被解析为减法。</li> <li><code>-</code>在一个字面数字的开头，它被解析为一个负数。</li> <li><code>-</code>两个数字之间不考虑空格，这是作为减法解析。</li> <li><code>-</code>在除字符数字外的值之前，该值被解析为一元否定。</li></ol></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> a-1<span class="token punctuation">;</span> <span class="token comment">// a-1</span>
<span class="token keyword">@debug</span> 5px-3px<span class="token punctuation">;</span> <span class="token comment">// 2px</span>
<span class="token keyword">@debug</span> 5-3<span class="token punctuation">;</span> <span class="token comment">// 2</span>
<span class="token keyword">@debug</span> 1 -2 3<span class="token punctuation">;</span> <span class="token comment">// 1 -2 3</span>

<span class="token property"><span class="token variable">$number</span></span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token keyword">@debug</span> 1 -<span class="token variable">$number</span> 3<span class="token punctuation">;</span> <span class="token comment">// -1 3</span>
<span class="token keyword">@debug</span> 1 <span class="token punctuation">(</span>-<span class="token variable">$number</span><span class="token punctuation">)</span> 3<span class="token punctuation">;</span> <span class="token comment">// 1 -2 3</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> a-1  // a-1</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 5px-3px  // 2px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 5-3  // 2</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1 -2 3  // 1 -2 3</span>

<span class="token variable-line"><span class="token variable">$number</span><span class="token punctuation">:</span> 2</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1 -$number 3  // -1 3</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1 (-$number) 3  // 1 -2 3</span>
</code></pre></div></div></div></div> <h2 id="除法运算"><a href="#除法运算" aria-hidden="true" class="header-anchor">#</a> 除法运算</h2> <p>一些CSS属性使用<code>/</code>分隔值多个值。这意味着Sass必须消除<code>/</code>作为属性值和<code>/</code>作为除法之间的歧义。为了实现这一功能，如果两个数字之间用<code>/</code>分隔，除非满足以下条件之一，否则Sass将以斜杠分隔而不是除法打印结果：</p> <ul><li>任何一个表达式都不是一个字符数字。</li> <li>结果存储在变量中或由函数返回。</li> <li>该操作被圆括号包围，除非这些圆括号位于包含该操作的列表之外。</li> <li>结果用作另一个操作的一部分（除<code>/</code>之外）。</li></ul> <p>如果你想强制<code>/</code>被当作分隔符，你可以这样写<code>#{&lt;expression&gt;} / #{&lt;expression&gt;}</code>。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> 15px <span class="token operator">/</span> 30px<span class="token punctuation">;</span> <span class="token comment">// 15px/30px</span>
<span class="token keyword">@debug</span> <span class="token punctuation">(</span>10px <span class="token operator">+</span> 5px<span class="token punctuation">)</span> <span class="token operator">/</span> 30px<span class="token punctuation">;</span> <span class="token comment">// 0.5</span>
<span class="token keyword">@debug</span> #<span class="token punctuation">{</span>10px <span class="token operator">+</span> 5px<span class="token punctuation">}</span> <span class="token operator">/</span> 30px<span class="token punctuation">;</span> <span class="token comment">// 15px/30px</span>

<span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> 15px <span class="token operator">/</span> 30px<span class="token punctuation">;</span>
<span class="token keyword">@debug</span> <span class="token variable">$result</span><span class="token punctuation">;</span> <span class="token comment">// 0.5</span>

<span class="token keyword">@function</span> <span class="token function">fifteen-divided-by-thirty</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">@return</span> 15px <span class="token operator">/</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">@debug</span> <span class="token function">fifteen-divided-by-thirty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0.5</span>

<span class="token keyword">@debug</span> <span class="token punctuation">(</span>15px/30px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0.5</span>
<span class="token keyword">@debug</span> <span class="token punctuation">(</span>bold 15px/30px sans-serif<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// bold 15px/30px sans-serif</span>
<span class="token keyword">@debug</span> 15px/30px <span class="token operator">+</span> 1<span class="token punctuation">;</span> <span class="token comment">// 1.5</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> 15px / 30px  // 15px/30px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> (10px <span class="token atrule">+</span> 5px) / 30px  // 0.5</span>

<span class="token variable-line"><span class="token variable">$result</span><span class="token punctuation">:</span> 15px <span class="token operator">/</span> 30px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> $result  // 0.5</span>

<span class="token atrule-line"><span class="token atrule">@function</span> fifteen-divided-by-thirty()</span>
<span class="token atrule-line">  <span class="token atrule">@return</span> 15px / 30px</span>

<span class="token atrule-line"><span class="token atrule">@debug</span> fifteen-divided-by-thirty()  // 0.5</span>

<span class="token atrule-line"><span class="token atrule">@debug</span> (15px/30px)  // 0.5</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 15px/30px <span class="token atrule">+</span> 1  // 1.5</span>

</code></pre></div></div></div></div> <h2 id="单位"><a href="#单位" aria-hidden="true" class="header-anchor">#</a> 单位</h2> <p>Sass对操作基于<a href="https://zh.wikipedia.org/wiki/%E8%AE%A1%E9%87%8F%E5%8D%95%E4%BD%8D" target="_blank" rel="noopener noreferrer">计量单位<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>的单位计算提供了强大的支持。当两个数相乘时，它们的单位也相乘。当一个数除以另一个数时，结果取第一个数的分子单位和第二个数的分母单位。一个数在分子和/或分母上可以有任意数量的单位。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> 4px <span class="token operator">*</span> 6px<span class="token punctuation">;</span> <span class="token comment">// 24px*px (read &quot;square pixels&quot;)</span>
<span class="token keyword">@debug</span> 5px <span class="token operator">/</span> 2s<span class="token punctuation">;</span> <span class="token comment">// 2.5px/s (read &quot;pixels per second&quot;)</span>
<span class="token keyword">@debug</span> 5px <span class="token operator">*</span> 30deg <span class="token operator">/</span> 2s <span class="token operator">/</span> 24em<span class="token punctuation">;</span> <span class="token comment">// 3.125px*deg/s*em</span>
                                <span class="token comment">// (read &quot;pixel-degrees per second-em&quot;)</span>

<span class="token property"><span class="token variable">$degrees-per-second</span></span><span class="token punctuation">:</span> 20deg/1s<span class="token punctuation">;</span>
<span class="token keyword">@debug</span> <span class="token variable">$degrees-per-second</span><span class="token punctuation">;</span> <span class="token comment">// 20deg/s</span>
<span class="token keyword">@debug</span> 1 <span class="token operator">/</span> <span class="token variable">$degrees-per-second</span><span class="token punctuation">;</span> <span class="token comment">// 0.05s/deg</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> 4px * 6px  // 24px*px (read &quot;square pixels&quot;)</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 5px / 2s  // 2.5px/s (read &quot;pixels per second&quot;)</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em</span>
<span class="token comment">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>

<span class="token variable-line"><span class="token variable">$degrees-per-second</span><span class="token punctuation">:</span> 20deg<span class="token operator">/</span>1s</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> $degrees-per-second  // 20deg/s</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1 / $degrees-per-second  // 0.05s/deg</span>
</code></pre></div></div></div></div> <div class="warning custom-block"><p>因为CSS不支持像素*像素这样的复杂单位，所以使用带有复杂单位的数字作为<a href="/sass-cn/api/StyleRules/PropertyDeclarations.html">属性值</a>会产生错误。不过，这是一个伪装的特性；如果你没有得到正确的单位，这通常意味着你的计算出了问题！记住，您可以使用<a href="/sass-cn/api/AtRules/Debug.html">@debug规则</a>来检查任何变量或<a href="/sass-cn/api/Syntax/Structure.html#表达式">表达式</a>的单位。</p></div> <p>Sass将自动兼容不同单位类型间的转换，尽管它将为结果选择哪个单元取决于使用的是哪种Sass实现。如果您试图组合不兼容的单元，比如<code>1in + 1em</code>， Sass将抛出会抛错。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// CSS defines one inch as 96 pixels.</span>
<span class="token keyword">@debug</span> 1in <span class="token operator">+</span> 6px<span class="token punctuation">;</span> <span class="token comment">// 102px or 1.0625in</span>

<span class="token keyword">@debug</span> 1in <span class="token operator">+</span> 1s<span class="token punctuation">;</span>
<span class="token comment">//     ^^^^^^^^</span>
<span class="token comment">// Error: Incompatible units s and in.</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token comment">// CSS defines one inch as 96 pixels.</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> 1in <span class="token atrule">+</span> 6px  // 102px or 1.0625in</span>

<span class="token atrule-line"><span class="token atrule">@debug</span> 1in <span class="token atrule">+</span> 1s</span>
<span class="token comment">//     ^^^^^^^^</span>
<span class="token comment">// Error: Incompatible units s and in.</span>
</code></pre></div></div></div></div> <p>在实际的单位计算中，如果分子中包含的单位与分母中的单位（比如<code>96px / 1in</code>）相匹配，那么它们就会相互抵消。这样就很容易定义一个比率，您可以使用它在单位之间进行转换。在下面的示例中，我们将所需的速度设置为每50个像素1秒，然后将其乘以transition覆盖的像素数，以获得所需的时间。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$transition-speed</span></span><span class="token punctuation">:</span> 1s/50px<span class="token punctuation">;</span>

<span class="token keyword">@mixin</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token variable">$left-start</span><span class="token punctuation">,</span> <span class="token variable">$left-stop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token variable">$left-start</span><span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> left <span class="token punctuation">(</span><span class="token variable">$left-stop</span> <span class="token operator">-</span> <span class="token variable">$left-start</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token variable">$transition-speed</span><span class="token punctuation">;</span>

  <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">{</span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token variable">$left-stop</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">.slider </span><span class="token punctuation">{</span>
  <span class="token keyword">@include</span> <span class="token function">move</span><span class="token punctuation">(</span>10px<span class="token punctuation">,</span> 120px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token variable-line"><span class="token variable">$transition-speed</span><span class="token punctuation">:</span> 1s<span class="token operator">/</span>50px</span>

<span class="token atrule-line"><span class="token atrule">@mixin</span> move($left-start, $left-stop)</span>
<span class="token property-line">  <span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
<span class="token property-line">  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token variable">$left-start</span></span>
<span class="token property-line">  <span class="token property">transition</span><span class="token punctuation">:</span> left (<span class="token variable">$left-stop</span> <span class="token operator">-</span> <span class="token variable">$left-start</span>) <span class="token operator">*</span> <span class="token variable">$transition-speed</span></span>

<span class="token property-line">  <span class="token property">&amp;</span><span class="token punctuation">:</span><span class="token property">hover</span></span>
<span class="token property-line">    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token variable">$left-stop</span></span>

<span class="token selector">.slider</span>
<span class="token atrule-line">  <span class="token atrule">@include</span> move(10px, 120px)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.slider</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> left 2.2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.slider:hover</span> <span class="token punctuation">{</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <div class="warning custom-block"><p>在实际的单位计算中，如果分子中包含的单位与分母中的单位(比如96px / 1in)相匹配，那么它们就会相互抵消。这样就很容易定义一个比率，您可以使用它在单位之间进行转换。在下面的示例中，我们将所需的速度设置为每50个像素1秒，然后将其乘以转换覆盖的像素数，以获得所需的时间。</p> <p>您应该特别避免使用像<code>#{$number}px</code>这样的内插。这实际上并没有创建一个数字！它创建了一个看起来像数字的<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">无引号字符串</a>，不能用于任何<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">数字操作</a>或<a href="">函数</a>。试着把你的数字单位提取出来，这样<code>$number</code>就已经有了单位<code>px</code>，或者写成<code>$number * 1px</code>。</p></div> <div class="warning custom-block"><p>Sass中的百分比和其他单位一样有效。它们不能与小数互换，因为在CSS中小数和百分数的含义不同。例如，<code>50%</code>是一个以<code>%</code>为单位的数字，Sass认为它与<code>0.5</code>不同。</p> <p>可以使用单位算术在小数和百分数之间进行转换。<code>$percentage / 100%</code>将返回对应的小数，<code>$decimal * 100%</code>将返回对应的百分比。还可以使用<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">percent()</a>作为更显式的<code>$decimal * 100%</code>的写法。</p></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">11/5/2019, 4:49:11 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/sass-cn/api/Operators/Relational.html" class="prev">
          关系运算
        </a></span> <span class="next"><a href="/sass-cn/api/Operators/String.html">
          字符运算
        </a>
        →
      </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/sass-cn/assets/js/app.deb571aa.js" defer></script><script src="/sass-cn/assets/js/layout-layout.f021cffe.js" defer></script><script src="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" defer></script><script src="/sass-cn/assets/js/page-api-operators-numeric.99a7bdba.js" defer></script><script src="/sass-cn/assets/js/93.6bc9799b.js" defer></script>
</body>

</html>